<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="index_head.jsp" %>

<body>
 <!--顶部工具条-->
<div class=" w-100p mini-top-bar">
    <div class="w-1200 margin-0-auto">
        <ul class="nav-left fl">
            <li class="home"><a href="${ctx }">达达订货首页</a></li>
            <li class="reg-factory"><a href="${ctx }/user/register?registerType=factory">工厂入驻</a></li>
            <c:choose>
	        	<c:when test="${currentUser == null}">
	        		<li class="login"><a href="${ctx}/user/login">登录</a></li>
            		<li class="register"><a href="${ctx }/user/register">注册</a></li>
	        	</c:when>
	        	<c:otherwise>
	        		<li class="login" style="color:black;">欢迎您,${currentUser.realName }!<span style="color:blue;cursor:pointer" onclick="javascript:location.href='j_spring_security_logout'">【退出登录】</span></li>
	        	</c:otherwise>
        	</c:choose>
        </ul>
        <ul class="nav-right fr">
            <li class="order"><a href="${ctx }/admin/index?target=/order/myOrder">我的订单</a></li>
            <li class="account"><a href="${ctx }/admin/index">个人中心</a></li>
            <li class="downapp"><a href="#">下载APP</a></li>
        </ul>
    </div>
</div>


<!--logo 和tags-->
<div class="w-1200 sub-nav margin-0-auto">
   <a class="logo" href="${ctx }"><img src="${ctx }/res/img/icon/logo.png"></a>
    <div class="citys">
        <div class="current-city js-current-city">
        	<c:choose>
	        	<c:when test="${currentCity == null}">
	        		东莞
	        	</c:when>
	        	<c:otherwise>
	        		${currentCity.name }
	        	</c:otherwise>
        	</c:choose>
        </div>
        <div class="citys-list">
            <div class="label">热门城市:</div>
            <ul>
                <c:forEach items="${cities }" var="c" varStatus="cs">
                	<li class="js-city" data-city-id="${c.id }" data-city-name="${c.name }">${c.name }</li>
                </c:forEach>
            </ul>
            <span  class="js-city all-city" data-city="{name:'全部城市',id:'9999'}">全部城市</span>
        </div>
    </div>
    <ul class="tag-label">
	    <li class="zhixiao"><i class="icon icon-zhixiao"></i>工厂直销</li>
	    <li class="dijia"><i class="icon icon-dijia"></i>低价保证</li>
	    <li class="fuwu"><i class="icon icon-fuwu"></i>极致服务</li>
	    <li class="zhibao"><i class="icon icon-zhibao"></i>三年质保</li>
    </ul>
    <a href="#" class="go-shopcart">购物车(<span class="text-red" id="cartCount">0</span>)</a>
</div>
<script type="text/javascript">
    $(function () {
        $(document).on('click','.js-city',function (e) {
            var city = $(e.currentTarget).data();
            if(city.cityId != '' && city.cityId != '9999') {
            	var json = {"cityId":city.cityId};
            	$.ajax({
            		url: "${ctx}/changeCity",
            		data:json,
            		dataType: "json",
            		type: "get",
            		async:"false",
            		success: function(data) {
            			if (data.success) {
            				//loading带文字
            				 $('.js-current-city').html(city.cityName);
            				 location.reload();
            			} else {
            				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
            			}
            		}
            	});
            }
        })
    })
</script><!--导航-->
<div class="menu-warp  w-100p ">
    <div class="menu w-1200 margin-0-auto">
        <div class="menu-main" id="productTypeList">
            <div class="menu-title active">商品类目</div>
            <ul class="server-list js-server-list" style="display:none;">
            	<c:forEach items="${categories }" var="c" varStatus="s">
			        <li data-target="${s.index+1 }">
	                    <div onclick="window.open('${ctx }/product/list?productCategory.id=${c.id}');"  class="menu-sub-title"><a >${c.name }</a><i class=" fr icon icon-arrow-right"></i></div>
	                </li>
		        </c:forEach>
            </ul>
            <div class="cate-list js-cate-list">
            	<c:forEach items="${categories }" var="c" varStatus="ss">
            		<div id="cate-list-${ss.index+1 }" class="subitems">
            		<c:forEach items="${c.children }" var = "cc" varStatus="sss">
	                    <dl class="">
	                        <dt><a target="_blank" href="${ctx }/product/list?productCategory.id=${cc.id}">${cc.name }<i>&gt;</i></a></dt>
	                        <dd>
		                        <c:forEach items="${cc.children }" var = "ccc" varStatus="ssss">
		                            <a target="_blank" href="${ctx }/product/list?productCategory.id=${ccc.id}">${ccc.name }</a>
		                        </c:forEach>
	                        </dd>
	                    </dl>
                    </c:forEach>
                    </div>
            	</c:forEach>
           </div>    
        </div> 
        <ul class="menu-list">
            <!--  
            <li><a class="active" href="${ctx }">首页</a></li>
            <li><a href="${ctx }/design/index">样板方案</a></li>
            <li><a href="http://rzds.admin.3vjia.com/Login.aspx" target="_blank">3D软装大师</a></li>
            <li><a href="${ctx }/hardcover/index" target="_blank">拎包入住</a></li>
            
            <li><a class="active" href="${ctx }">首页</a></li>
            <li><a href="${ctx }/design/index">样板方案</a></li>
            <li><a href="http://rzds.admin.3vjia.com/Login.aspx" target="_blank">3D软装大师</a></li>
            <li><a href="${ctx }/hardcover/index" target="_blank">拎包入住</a></li>
            -->
        </ul>
    </div>
</div>
<script type="text/javascript">
    $('.js-server-list li').hover(function (event) {
        var target = $(this).data("target");
        console.log(target);
        $(".js-cate-list").find('.subitems.active').removeClass('active');
        $("#cate-list-"+target).addClass('active');
    })
</script><!--主焦点图-->
<div class="slider  w-100p " >
    <ul class="bxslider" style="height:250px">
        <!-- <li><img src="/img/other/slider-1.jpg"/></li>
        <li><img src="/img/other/slider-1.jpg"/></li>
        <li><img src="/img/other/slider-1.jpg"/></li> -->
        <c:forEach items="${ads }" var="a">
        	<li ><img src="${a.image }" style="height:420px"/></li>
        </c:forEach>
    </ul>
</div><!--搜索框-->
<div class="searchbar-warp-max w-1200 margin-0-auto">
    <div class="searchbar">
        <form action="${ctx }/product/list">
            <span class="icon-serach"></span>
            <input class="serach-input" name="name" type="text" value="" placeholder="请输入关键字">
            <input class="serach-btn" type="submit">搜索</button>
        </form>
    </div>
    <ul class="key-words margin-0-auto">
        <c:forEach items="${categories }" var="c">
        <li onclick='location="${ctx}/product/list?productCategory.id=${c.id}"'>${c.name }</li>
        <li class="splider"></li>
        </c:forEach>
    </ul></div> <!--新品发布-->
<div class="new-arrive  w-1200 margin-0-auto">
     <img class="title" src="${ctx}/res/img/icon/xinpinfabu.png">
     <a class="more" href="${ctx}/product/list?sortType=3"><img src="${ctx}/res/img/icon/more.png"></a>
    <ul>
            <c:forEach items="${newProducts }" var="p">
            <li style="height:166px;width:260px;text-align:center;">
                <a href="${ctx}/product/detail?id=${p.id}">
                    <img src="${p.headImage }" style="width:auto;height:160px;"/>
                    <p class="name">${p.name }</p>
                    <p class="price">
                    	￥<fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/>
                    </p>
                </a>
            </li>
            </c:forEach>
    </ul>
</div><!--推荐方案-->
<div class="recommend  w-1200 margin-0-auto">
    <img class="title" src="${ctx }/res/img/icon/tuijianfangan.png">
    <a class="more" href="${ctx }/design/index"><img src="${ctx }/res/img/icon/more.png"></a>
    <div class="modelLeftLoop">
        <a class="sPrev"></a>
        <div class="bd scrollLoading1">
            <ul>
            	<c:forEach items="${designs }" var="d" varStatus="ds">
            	<li>
                    <div class="img" style="cursor:pointer;"><img data-original="${d.headImage }" onclick="javascript:location='${ctx }/design/detail?id=${d.id}'"><a class="btn" onclick="orderDesigner(${d.designer.id});">一键预约</a></div>
                    <div class="portrait" style="cursor:pointer;">
                        <div class="portrait_bg" onclick="javascript:location='${ctx }/design/designer?id=${d.designer.id}'"><img src="${d.user.headImage }"></div>
                        <div class="tit" onclick="javascript:location='${ctx }/design/designer?id=${d.designer.id}'">${d.user.realName }</div>
                    </div>
                    <div class="tr"><h1>${d.title }</h1>
                        <p>${d.theme }</p></div>
                </li>
            	</c:forEach>
            </ul>
        </div>
        <a class="sNext"></a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".modelLeftLoop").slide({
            mainCell: ".bd ul",
            effect: "leftLoop",
            vis: 4,
            scroll: 4,
            autoPlay: "true",
            prevCell: ".sPrev",
            nextCell: ".sNext",
            triggerEvent: true
        });
    })
</script><!--品馆类目-->
<!-- <div class="category  w-1200 margin-0-auto">
    <img class="title" src="/img/icon/pinguanleimu.png">
    <ul>
        <li>
            <div class="fl brand-min-list">
                <a class="fl brand-min"><img src="/img/other/pingpai01.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai02.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai03.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai04.jpg"/></a>
            </div>
            <div class="fl brand-max">
                <a href="#">
                    <p class="brand-name"><span>进口馆</span><span class="en-name">IMPORT PAVILION</span></p>
                    <img src="/img/other/cat-1.jpg"/>
                    <p class="name">进口居家客厅套装</p>
                    <p class="desc">真皮 舒适 质量保证</p>
                    <p class="price">已售:846<span>￥699</span></p>
                </a>
            </div>
        </li>
        <li>
            <div class="fl brand-min-list">
                <a class="fl brand-min"><img src="/img/other/pingpai01.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai02.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai03.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai04.jpg"/></a>
            </div>
            <div class="fl brand-max br">
                <a href="#">
                    <p class="brand-name"><span>定制馆</span><span class="en-name">CUSTOM PAVILION</span></p>
                    <img src="/img/other/cat-1.jpg"/>
                    <p class="name">进口居家客厅套装</p>
                    <p class="desc">真皮 舒适 质量保证</p>
                    <p class="price">已售:846<span>￥699</span></p>
                </a>
            </div>
        </li>
        <li>
            <div class="fl brand-min-list">
                <a class="fl  brand-min"><img src="/img/other/pingpai01.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai02.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai03.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai04.jpg"/></a>
            </div>
            <div class="fl  brand-max">
                <a href="#">
                    <p class="brand-name"><span>品牌馆</span><span class="en-name">BRAND PAVILION</span></p>
                    <img src="/img/other/cat-1.jpg"/>
                    <p class="name">进口居家客厅套装</p>
                    <p class="desc">真皮 舒适 质量保证</p>
                    <p class="price">已售:846<span>￥699</span></p>
                </a>
            </div>
        </li>
        <li>
            <div class="fl brand-min-list">
                <a class="fl  brand-min"><img src="/img/other/pingpai01.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai02.jpg"/></a>
                <a class="fl  brand-min"><img src="/img/other/pingpai03.jpg"/></a>
                <a class="fl   brand-min"><img src="/img/other/pingpai04.jpg"/></a>
            </div>
            <div class="fl  brand-max br">
                <a href="#">
                    <p class="brand-name"><span>个性馆</span><span class="en-name">PERSONALITY PAVILION</span></p>
                    <img src="/img/other/cat-1.jpg"/>
                    <p class="name">进口居家客厅套装</p>
                    <p class="desc">真皮 舒适 质量保证</p>
                    <p class="price">已售:846<span>￥699</span></p>
                </a>
            </div>
        </li>
    </ul>
</div> --><div class="w-100p bg-gray bg-gray-box">
    <c:forEach items="${cpList }" var="cp" varStatus="cps">
    <c:if test="${cp.upAds != null && fn:length(cp.upAds) > 0 }">
    	<div class="ad-banner w-1200 margin-0-auto">
	        <%-- <img src="${ctx}/res/img/ad-${cps.index%3 }.jpg"> --%>
	        <img src="${cp.upAds[0].image}">
	    </div> 
    </c:if>
    <div class="category-floor w-1200 margin-0-auto">
        <div class="title-bar">
            <span class="color-tag color-tag-1"></span>
            <span class="cat-name">${cp.category.name }</span>
            <!-- 
            <span class="cat-en-name">RESIDENTIAL FURNITURE</span>
             -->
            <a href="${ctx}/product/list?productCategory.id=${cp.category.id}" class="fr more-link">MORE >></a>
        </div>
        <div class="left-brand mt10 fl color-tag-1">
            <div class="cat-slider">
                <ul class="bxslider">
                 	<c:choose>
                 		<c:when test="${cp.adds == null || fn:length(cp.adds) == 0 }">
                 			<li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
		                    <li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
		                    <li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
                 		</c:when>
                 		<c:otherwise>
                 			<c:forEach items="${cp.adds }" var="a" varStatus="as">
                 				<li><img src="${a.image }"/></li>
                 			</c:forEach>
                 		</c:otherwise>
                 	</c:choose>
                </ul>
            </div>
            <c:forEach items="${cp.adds }" var="a" varStatus="as" begin="0" end="0">
	            <div class="title color-tag-1" style="background-color:${a.color};">
	                <h2>${a.text }</h2>
	                <p>${a.subText }</p>
	            </div>
             </c:forEach>
        </div>
        <div class="right-content mt10 fl">
            <div class="brand-list">
                <c:forEach items="${cp.children }" var="cc" varStatus="status">
                <span class="${status.index eq 0 ? 'active' : '' }" onclick="changeCategory(this,'${cc.id }')">${cc.name }</span>
                </c:forEach>
            </div>
            <div class="brand-detail">
                <ul>
                        <c:forEach items="${cp.products }" var="p">
                        <li>
                            <a href="${ctx}/product/detail?id=${p.id}">
                                <img style="bottom:20px;" src="${p.headImage }">
                                <p class="name">${p.name }</p>
                                <p class="desc">${p.subTitle }</p>
                                <div class="bottom-panel">
                                     <p class="price">￥<fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/></p>
                                    <%-- <p><del>￥<fmt:formatNumber value="${p.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del></p> --%>
                                   <p class="solded">已售:${p.totalSold }</p>
                                </div>
                            </a>
                        </li>
                        </c:forEach>
                </ul>
            </div>
        </div></div>
    
      </c:forEach>
      
    
    <!-- 
    <div class="ad-banner w-1200 margin-0-auto">
        <img src="${ctx}/res/img/ad-1.jpg">
    </div>
     -->    
</div>
<div id="designOrder_div" style="display:none;">
<div id="order_div">
	<form>
		<input type="hidden" name="designerId" value="${designer.id }" />
		<input type="text" value="姓名" name="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text" id="name">
		<input type="text" value="手机号" name="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text" id="moblie">
		<select name="provinceId" class="select">
		 <option value="1">湖南省</option>
		 <option value="2">广州省</option>
		</select>
		<select name="cityId" class="select">
		 <option value="3">长沙市</option>
		 <option value="3">岳阳市</option>
		</select>
		<select name="communityId" class="select1">
		 <option value="1">北京大观园</option>
		</select>
		<input name="" type="button" class="button" onclick="return doOrder(this);" value="一键预约" id="btn">
	</form>
</div>
</div>
<%@include file="foot.jsp" %>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});
        $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
        var json = {};
    	$.ajax({
    		url: "${ctx}/cart/cartCountOfUser",
    		data:json,
    		dataType: "json",
    		type: "get",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				var cartCount = data.count;
    				$('#cartCount').html(cartCount);
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	$(".go-shopcart").on('click',function() {
    		location.href="${ctx}/cart/cartList";
    	});
    	$('#productTypeList').on('mouseover',function() {
    		$(this).find('ul').show();
    	});
    	$('#productTypeList').on('mouseout',function() {
    		$(this).find('ul').hide();
    	});
    });
    
    function changeCategory(obj,cid) {   //	切换
    	if(!$(obj).hasClass("active")) {
    		var json = {"id":cid};
        	$.ajax({
        		url: "${ctx}/changeCategory",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				//loading带文字
        				var productData = data.data;
        				var parentDiv = $(obj).parents(".brand-list");
        				parentDiv.find("span").removeClass("active");
        				$(obj).addClass("active");
        				var ul = $(obj).parents(".right-content").find("ul");
        				ul.empty();
        				if(productData != null && productData.length > 0) {
        					for(var i = 0;i < productData.length;i ++ ) {
        						var theData = productData[i];
        						var newLi = $("<li></li>");
        						var newA = $('<a href="product/detail?id='+theData.id+'"></a>')
        						newA.append('<img src="'+theData.headImage+'">');
        						newA.append('<p class="name">'+theData.name+'</p>');
        						newA.append('<p class="desc">'+theData.subTitle+'</p>');
        						newA.append(' <div class="bottom-panel"><p class="price">￥'+theData.realPrice+'</p><p class="solded">已售:'+theData.totalSold+'</p></div>');
        						newLi.append(newA);
            					ul.append(newLi);
        					}
        				}
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
    	}
    	
    }
</script>
</body>
</html>
